Flutter 怎么实现地图导航功能？ |
您所在的位置：网站首页 › flutter 地图插件 › Flutter 怎么实现地图导航功能？ |
Flutter 怎么实现地图导航功能？
|
Flutter 怎么实现地图导航功能？ 大家好，我是坚果，我的公众号“坚果前端”， 本来今天带来的是 flutter 基础部分，但是有人问道说是 Flutter 怎么实现地图导航功能，那么今天就和大家交流一下 引子一个 app 咋能没有导航功能呢，我们在应用开发中经常需要用到地图定位或导航的功能，而集成该功能的方式总的来说分为两类： 第 1 类：App 集成导航功能这种方式的优点是可以进行深度地图定制，比如出行或外卖软件会有自己的定制，上面会有司机或骑手的小图标，但是集成开发成本也是比较高的。所以很大程度上不太使用 第 2 类：跳转第三方地图软件这种方式是比较简单的一种，把目的地传给第三方导航软件，比如高德地图，它会为你提供导航功能。这种方式开发成本低，可快速提供导航功能。 那么对于 Flutter 来说如何实现呢，我提供了一种解决方案，大家可以参考一下， 第一步引入插件 flutter_svg: ^0.19.1 ##只在使用图标的使用导入，不用可以不导入 map_launcher: ^1.1.3+1复制代码 对于 iOS，在 Info.plist 文件中添加 url 方案 LSApplicationQueriesSchemes comgooglemaps baidumap iosamap waze yandexmaps yandexnavi citymapper mapswithme osmandmaps dgis qqmap here-location复制代码 用法获取已安装地图的列表并首先启动import 'package:map_launcher/map_launcher.dart';final availableMaps = await MapLauncher.installedMaps;print(availableMaps); await availableMaps.first.showMarker( coords: Coords(28, 120), title: "坚果前端",);复制代码 检查地图是否安装并启动它import 'package:map_launcher/map_launcher.dart';if (await MapLauncher.isMapAvailable(MapType.google)) { await MapLauncher.showMarker( mapType: MapType.google, coords: coords, title: title, description: description, );}复制代码 封装import 'package:flutter/material.dart';import 'package:flutter_svg/flutter_svg.dart';import 'package:map_launcher/map_launcher.dart';class MapsSheet { static show({ @required BuildContext context, @required Function(AvailableMap map) onMapTap, }) async { final availableMaps = await MapLauncher.installedMaps; for (var map in availableMaps) { map.mapName = getLocalName(amap: map); } showModalBottomSheet( context: context, backgroundColor: Colors.transparent, builder: (BuildContext context) { return SafeArea( child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Column( children: [ Expanded( child: SingleChildScrollView( child: Container( child: Wrap( children: [ for (var map in availableMaps) ListTile( onTap: () => onMapTap(map), title: Text(map.mapName), leading: SvgPicture.asset( map.icon, height: 50.0, width: 50.0, ), ), ], ), ), ), ), ], ), ), ); }, ); }}String getLocalName({AvailableMap amap}) { switch (amap.mapType) { case MapType.amap: return '高德地图'; case MapType.baidu: return '百度地图'; case MapType.tencent: return '腾讯地图'; case MapType.google: return '谷歌地图'; case MapType.apple: return '苹果地图'; default: return amap.mapName; }}复制代码 使用MapsSheet.show( context: context, onMapTap: (map) { map.showMarker( coords: Coords(_local.lat, _local.lng), title: _local.addr, zoom: 20, ); }, );复制代码 效果展示
以上就是今天的分享内容，也欢迎与大家一起学习，交流 Flutter 的使用。 |
【本文地址】
今日新闻 |
推荐新闻 |